<template>
  <div class="index">
    <h1>Hello World</h1>
    <div class="vue-svg">
      <img src="@/assets/vue.svg" alt="" srcset="" />
    </div>
    <div class="router-list router-size">
      <span title="article" class="router-list__item" @click="toVirtualPage"
        >toVirtualPage</span
      >
      |
      <span class="router-list__item" @click="toComposePage"
        >toComposePage</span
      >
      |
      <span class="router-list__item" @click="toMobilePage">toMobilePage</span>
    </div>
    <div class="wrapper">
      <!-- <virtual-list></virtual-list> -->
      <core-virtual></core-virtual>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {},
  methods: {
    toVirtualPage() {
      this.$router.push("/csdn-virtual");
    },
    toComposePage() {
      this.$router.push("/compose");
    },
    toMobilePage() {
      this.$router.push("/mobile-page");
    },
  },
};
</script>

<style lang="scss" scoped>
.router-list {
  margin: 18px 0;

  &__item {
    cursor: pointer;
  }
}

h1 {
  color: $color-primary;
  // color: var(--bgPhColor);
}
</style>
